/*
 * 职员列表
 * @Author: ljb
 * @Date: 2018-03-27 17:53:05
 * @Last Modified by: ljb
 * @Last Modified time: 2018-08-10 14:47:57
 */
<style lang="less" rel="stylesheet/less" type="text/less" scoped>

</style>
<template>
	<div class="v-admin-staff-index">

		<Table
			:columns="columns"
			:loading="loading"
			:data="staffs"
			:height="tableHeight()"
			border
			class="personal-scrollbar"
			@on-sort-change="sortable"/>

	</div>
</template>

<script>

import Button from 'iview/src/components/button';
import { computedTableHeight } from 'src/views/mixins/computedTableHeight';
// import Icon from 'iview/src/components/icon';

export default {
	name: 'StaffIndex',
	mixins: [computedTableHeight],
	props: {
		loading: {
			type: Boolean,
			required: true,
		},
		staffs: {
			type: Array,
			required: true,
		},
		// staffRoles: {

		// },
	},
	data() {
		return {
			columns: [
				// {
				//     type: 'selection',
				//     width: 60,
				//     align: 'center'
				// },
				{
					title: '职员名称',
					key: 'name',
					align: 'center',
					render: (h, { row }) => <div> { row.name || '-' } </div>,
				},
				{
					title: '电话',
					key: 'phone',
					align: 'center',
					render: (h, { row }) => <div> { row.phone || '-' } </div>,
				},
				{
					title: '性别',
					key: 'sex',
					align: 'center',
					render: (h, { row }) => <div> { parseInt(row.sex, 10) === 1 ? '女' : '男' } </div>,
				},
				{
					title: '年龄',
					key: 'age',
					align: 'center',
					render: (h, { row }) => <div> { row.age || '-' } </div>,
				},
				{
					title: '开通时间',
					key: 'created_at',
					width: 200,
					align: 'center',
					render: (h, { row }) => <div> { !row.created_at ? '-' : row.created_at } </div>,
				},
				{
					title: '操作',
					align: 'center',
					width: 200,
					render: (h, { row }) => (
						<div>
							<Button size="small" style={{ marginRight: '5px' }} on-click={() => { this.$emit('edit', row); }} type="primary">修改信息</Button>
							{
								row.is_deleted
									?
									<Button size="small" on-click={() => { this.$emit('recovery', row); }} type="success">恢复职员</Button>
									:
									<Button size="small" on-click={() => { this.$emit('delete', row); }} type="error">停用职员</Button>
							}
						</div>),
				},
			],
		};
	},
	methods: {

		/**
         * 排序的回调
         * @param  {Object} param {对应列的属性对象,里面包含了column列属性，key值，order排序字段}
         * @return {undefined}
         */
		sortable(param) {
			const search_param = {

				order_by: param.key,

				sort: param.order === 'normal' ? '' : param.order,

			};

			this.$emit('sort', search_param);
		},

	},
};
</script>
